<template>
  <view class="coupon-center">
    <view class="coupon-banner">
      <view class="banner-title">优惠券中心</view>
      <view class="banner-desc">领取更多优惠，购物更省钱</view>
    </view>
    
    <view class="coupon-category">
      <view class="category-item" v-for="(category, index) in couponCategories" :key="index" 
            :class="{ 'active': activeCategoryId === category.id }"
            @click="selectCategory(category.id)">
        {{ category.name }}
      </view>
    </view>
    
    <view class="coupon-list">
      <view class="coupon-item" v-for="(coupon, index) in availableCoupons" :key="index">
        <view class="coupon-left">
          <view class="coupon-amount">
            <text class="amount-symbol">¥</text>
            <text class="amount-value">{{ coupon.amount }}</text>
          </view>
          <view class="coupon-condition">{{ coupon.conditionText }}</view>
        </view>
        <view class="coupon-right">
          <view class="coupon-name">{{ coupon.name }}</view>
          <view class="coupon-time">{{ coupon.validTime }}</view>
          <view class="coupon-action" @click="receiveCoupon(coupon.id)">
            立即领取
          </view>
        </view>
      </view>
    </view>
    
    <el-empty v-if="availableCoupons.length === 0" description="暂无可用优惠券"></el-empty>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeCategoryId: '',
      couponCategories: [
        { id: '', name: '全部' },
        { id: 1, name: '新人专享' },
        { id: 2, name: '满减优惠' },
        { id: 3, name: '限时折扣' },
        { id: 4, name: '品类专区' }
      ],
      availableCoupons: [],
      page: 1,
      pageSize: 10,
      hasMore: true
    }
  },
  onLoad() {
    this.getAvailableCoupons(true)
  },
  onReachBottom() {
    if (this.hasMore) {
      this.page++
      this.getAvailableCoupons(false)
    }
  },
  methods: {
    selectCategory(id) {
      if (this.activeCategoryId === id) {
        return
      }
      
      this.activeCategoryId = id
      this.getAvailableCoupons(true)
    },
    async getAvailableCoupons(refresh = false) {
      if (refresh) {
        this.page = 1
        this.hasMore = true
      }
      
      try {
        const res = await this.$api.get('/coupon/available', {
          categoryId: this.activeCategoryId,
          page: this.page,
          pageSize: this.pageSize
        })
        
        if (refresh) {
          this.availableCoupons = res.list
        } else {
          this.availableCoupons = [...this.availableCoupons, ...res.list]
        }
        
        this.hasMore = res.list.length === this.pageSize
      } catch (error) {
        this.$toast.fail(error.message || '获取优惠券列表失败')
      }
    },
    async receiveCoupon(couponId) {
      try {
        await this.$api.post(`/coupon/receive/${couponId}`)
        this.$toast.success('优惠券领取成功')
        
        // 刷新优惠券列表
        this.getAvailableCoupons(true)
      } catch (error) {
        this.$toast.fail(error.message || '领取失败')
      }
    }
  }
}
</script>

<style>
.coupon-center {
  background-color: #f8f8f8;
  min-height: 100vh;
}
.coupon-banner {
  background-color: #f56c6c;
  color: #fff;
  padding: 30px 15px;
  text-align: center;
  margin-bottom: 15px;
}
.banner-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}
.banner-desc {
  font-size: 14px;
}
.coupon-category {
  background-color: #fff;
  display: flex;
  padding: 15px 0;
  margin-bottom: 15px;
  overflow-x: auto;
  white-space: nowrap;
}
.category-item {
  display: inline-block;
  padding: 5px 15px;
  margin: 0 5px;
  font-size: 14px;
  color: #333;
  border-radius: 20px;
}
.category-item.active {
  background-color: #f56c6c;
  color: #fff;
}
.coupon-list {
  padding: 0 15px;
}
.coupon-item {
  display: flex;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 15px;
  overflow: hidden;
  position: relative;
}
.coupon-left {
  width: 30%;
  background-color: #f56c6c;
  color: #fff;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.coupon-left::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 10px;
  background-image: radial-gradient(circle at 0 50%, transparent 0, transparent 7px, #fff 7px, #fff 10px);
  background-size: 10px 20px;
  background-repeat: repeat-y;
}
.coupon-amount {
  margin-bottom: 5px;
}
.amount-symbol {
  font-size: 16px;
}
.amount-value {
  font-size: 28px;
  font-weight: bold;
}
.coupon-condition {
  font-size: 12px;
  text-align: center;
}
.coupon-right {
  flex: 1;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.coupon-name {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  margin-bottom: 5px;
}
.coupon-time {
  font-size: 12px;
  color: #666;
}
.coupon-action {
  align-self: flex-end;
  color: #f56c6c;
  border: 1px solid